<template>
  <a-modal
    :visible="visible"
    title="人员信息操作"
    ok-text="确认"
    cancel-text="取消"
    @cancel="handleCancel"
    @ok="handleOk">
    <a-form
      :form="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }">
      <a-form-item label="姓名">
        <a-input
          :max-length="50"
          v-decorator="['name', validConfig.name]">
        </a-input>
      </a-form-item>
      <a-form-item label="身份证号码">
        <a-input
          :max-length="18"
          v-decorator="['idCard', validConfig.idCard]">
        </a-input>
      </a-form-item>
      <a-form-item label="学历">
        <a-select v-decorator="['education', validConfig.education]">
          <a-select-option v-for="item in selectData" :key="item.value" :value="item.value">
            {{ item.text }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="常驻地址">
        <a-textarea id="address" :max-length="20" v-decorator="['address', validConfig.address]"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
export default {
  name: 'People',
  data () {
    return {
      visible: false,
      form: this.$form.createForm(this, { name: 'people' }),
      selectData: [
        { value: 1, text: '学士' },
        { value: 2, text: '硕士' },
        { value: 3, text: '博士' }
      ],
      validConfig: {
        name: {
          rules: [{ required: true, message: '请输入姓名!' }]
        },
        idCard: {
          rules: [{ required: true, message: '请输入省份证号码!' }]
        },
        education: {
          initialValue: 1,
          rules: []
        },
        address: {
          rules: []
        }
      }
    }
  },
  methods: {
    // 新增操作
    toAdd () {
      this.form.resetFields()
      this.visible = true
    },
    // 编辑操作
    toEdit (param) {
      this.form.resetFields()
      this.visible = true
      this.copyObject = Object.assign({}, param) // 浅拷贝
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.copyObject, 'name', 'idCard', 'education', 'address'))
      })
    },
    // 确认
    handleOk () {
      // const that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          this.toSave(values)
        }
      })
    },
    // 取消
    handleCancel () {
      this.visible = false
    },
    // 数据保存
    toSave (values) {
      console.log(values)
      this.visible = false
      this.$emit('ok')
    }
  }
}
</script>

<style>
</style>
